<html lang='cn'>

<head>
    <title>IndexedDB reading testing</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

    <style>
        body {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .batman {
            background-color: #d7d9f2;
        }

        .normal {
            background-color: #cccccc;
        }

        .flash {
            background-color: #ffe8d4;
        }

        /* Inset */

        hr.style-two {
            border: 0;
            height: 0;
            border-top: hidden;
            border-bottom: 1px solid antiquewhite;
            border-width: thin;
        }

        .layout {
            display: flex;
            width: 100vw;
            height: 100vh;
        }

        .right {
            border-left-color: antiquewhite;
            border-style: solid;
            border-bottom: hidden;
            border-top: hidden;
            border-right: hidden;
            border-width: thin;
            height: 100vh;
        }

        .left {
            width: 200px;
        }

        .left button {
            background-color: aliceblue;
        }

        .left button:hover {
            background-color: antiquewhite;
        }

        .right>div,
        .left>div {
            padding: 10px 10px;
            display: flex;
            flex-direction: column;
        }


        .btn-group {
            box-sizing: border-box;
            display: flex;
            padding: 5px 10px;
            flex-direction: column;
        }

        .btn-group>button {
            margin: 0px 5px;
        }

        table {
            margin: 0px 5px;
            border-collapse: collapse;
        }

        th,
        td {
            text-align: center;
            border: 1px solid black;
            padding: 0px 4px;
        }

        tr {
            /* For Safari 3.0+ */
            -webkit-transition-property: background;
            -webkit-transition-duration: 0.2s;
            /* Standard syntax */
            transition-property: background;
            transition-duration: 0.2s;
        }

        tr[new] {
            background: #fd7c2a;
        }


        #info {
            width: 100%;
            height: 30px;
            border-left-color: antiquewhite;
            border-style: solid;
            border-left: hidden;
            border-top: hidden;
            border-right: hidden;
            border-width: thin;
        }
    </style>
</head>

<body>
    <div class='layout'>
        <div class='left'>
            <div>
                <select id="selector">
                    <option value="noindex" selected>用例 - 没有建立额外索引</option>
                    <option value="withindex">用例 - 建立索引</option>
                    <option value="withindex2">用例 - 建立索引2</option>
                    <option value="onebyone">用例 - 完成一个发一个</option>
                    <option value="allbyall">用例 - 完成一批发一批</option>
                    <option value="callback">用例 - 回调代替Promise</option>
                    <option value="BP">用例 - 最佳实践</option>
                </select>
            </div>
            <div>
                <input type='number' id='ipt1'></input>
                <input type='number' id='ipt2'></input>
                <input type='number' id='ipt3'></input>
                <input type='number' id='ipt5'></input>
                <button id='btnCreate' type='button'>创建库</button>
                <button id='btnDelete' type='button'>删除所有库</button>
            </div>
            <hr class='style-two'>
            <div class='btn-group'>
                <button id='btn1' type='button'>读取1份数据</button>
                <button id='btn2' type='button'>读取10份数据</button>
                <button id='btn3' type='button'>读取100份数据</button>
                <button id='btn4' type='button'>读取1000份数据</button>
            </div>
            <hr class='style-two'>
            <div>
                <input type='number' id='iptX' placeholder='自定义读取数据数量'></input>
                <button id='btnX' type='button'>读取X份数据</button>
                <input type='text' id='iptInterval' placeholder='间隔（ms)'></input>
                <button id='btnAuto' type='button'>开始间隔读取</button>
            </div>
            <hr class='style-two'>
            <div>
                <input type='text' id='iptA' placeholder='自定义读取数据数量'></input>
                <input type='text' id='iptB' placeholder='容量'></input>
                <button id='btnAuto2' type='button'>开始来一个读一个</button>
            </div>
        </div>

        <div class='right'>
            <div> <label id='info'> 暂无信息</label> </div>
            <button id='btnClear' type='button'>Clear Table</button>
            <button id='btnCopy' type='button'>Copy Table</button>
            <div id='output'> </div>
            <textarea id='ta'></textarea>
        </div>
    </div>

</body>

<script type='module' src='./index.js'> </script>

</html>
